<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card id="card">
          <el-form
            :model="regForm"
            :rules="regRules"
            ref="regFormRef"
            label-width="100px"
          >
            <el-form-item label="账号" prop="zhanghao">
              <el-input v-model="regForm.zhanghao"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="name">
              <el-input v-model="regForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="regForm.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="regForm.email"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="Num"></el-input>
              <el-button @click="getYan" id="getYan" :disabled="false"
                >获取验证码</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sub">提交</el-button>
              <el-button type="info" @click="clear">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/;
      if (regEmail.test(value)) {
        return callback();
      }
      callback(new Error("请输入正确邮箱"));
    };
    var checkZhang = (rule, value, callback) => {
      const regZhang = /^[a-zA-Z][a-zA-Z0-9_]{7,15}$/;
      if (regZhang.test(value)) {
        return callback();
      }
      callback(new Error("字母开头，允许8-16字节，允许字母数字下划线"));
    };
    var checkPass = (rule, value, callback) => {
      const regPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
      if (regPass.test(value)) {
        return callback();
      }
      callback(
        new Error(
          "必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-16 之间"
        )
      );
    };
    return {
      Num: "",
      thisYan: "",
      regForm: {
        zhanghao: "",
        name: "",
        password: "",
        email: "",
      },
      regRules: {
        zhanghao: [
          { required: true, message: "请输入账号", trigger: "blur" },
          //{ min: 12, max: 20, message: '长度在 12 到 20 个字符', trigger: 'blur' },
          { validator: checkZhang, trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 4,
            max: 12,
            message: "长度在 4 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPass, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async sub() {
      if (this.thisYan != this.Num) {
        this.$message.error("验证码错误");
        return;
      } else {
        const { data: res } = await this.$http.post("users/zhuce", {
          zhanghao: this.regForm.zhanghao,
          username: this.regForm.name,
          password: this.regForm.password,
          email: this.regForm.email,
        });
        if (res.status == 200) {
          this.$message.success("注册成功");
          this.$router.push("/userLogin");
          this.$refs.regFormRef.resetFields();
          return;
        } if(this.regForm.zhanghao == '' || this.regForm.name == '' || this.regForm.password == '' || this.regForm.email == ''){
          return this.$message.error("输入信息有误");
          }else {
          return this.$message.error("用户已存在");
        }
      }
    },
    clear() {
      this.$refs.regFormRef.resetFields();
    },
    async getYan() {
      document.getElementById("getYan").disabled = true;
      document.getElementById("getYan").textContent = "此按钮冻结30s";
      setTimeout(function() {
        document.getElementById("getYan").disabled = false;
        document.getElementById("getYan").textContent = "获取验证码";
      }, 30000);
      const { data: res } = await this.$http.post("/sendEmail/Yan", {
        email: this.regForm.email,
      });
      if (res.status != 200) return this.$message.error("发送失败");
      this.thisYan = res.data;
    },
  },
};
</script>
<style lang="less" scoped>
#card {
  position: fixed;
  top: 150px;
  left: 550px;
  width: 500px;
  height: 500px;
}
</style>
